<template>
  <div class="box">
    <el-card>
      <el-row>
        <el-form ref="form" :model="queryForm" label-width="80px">
          <el-col :span="12">
            <el-form-item label="标题">
              <el-select v-model="queryForm.name" placeholder="请选择标题" style="width: 100%">
                <el-option label="关于25年度XXXXXX" value="关于25年度XXXXXX"></el-option>
                <el-option label="关于24年度XXXXXX" value="关于24年度XXXXXX"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="btn-group">
            <el-button type="primary" @click="oldDetails">月度明细</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-form ref="form" :model="queryForm" label-width="80px">
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="queryForm.name1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker style="width: 100%" v-model="queryForm.data" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截至时间">
              <el-date-picker style="width: 100%" v-model="queryForm.olddata" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="汇报频次">
              <el-select v-model="queryForm.region" placeholder="请选择活动区域" style="width: 100%">
                <el-option label="月" value="yue"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-table :data="tableData" style="width: 100%" height="500" border>
        <el-table-column prop="dept" label="标题" min-width="180"> </el-table-column>
        <el-table-column prop="desc1" label="部门1" min-width="280">
          <template slot-scope="scope">
            <el-progress class="showProgressColor" :percentage="scope.row.Progress1"></el-progress>
            <el-input
              type="textarea"
              disabled
              :autosize="{ minRows: 19, maxRows: 19 }"
              v-model="scope.row.desc1"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="desc2" label="部门2" min-width="280">
          <template slot-scope="scope">
            <el-progress class="showProgressColor" :percentage="scope.row.Progress2"></el-progress>
            <el-input
              type="textarea"
              disabled
              :autosize="{ minRows: 19, maxRows: 19 }"
              v-model="scope.row.desc2"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="desc3" label="部门3" min-width="280">
          <template slot-scope="scope">
            <el-progress class="showProgressColor" :percentage="scope.row.Progress3"></el-progress>
            <el-input
              type="textarea"
              disabled
              :autosize="{ minRows: 19, maxRows: 19 }"
              v-model="scope.row.desc3"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="desc4" label="部门4" min-width="280">
          <template slot-scope="scope">
            <el-progress class="showProgressColor" :percentage="scope.row.Progress4"></el-progress>
            <el-input
              type="textarea"
              disabled
              :autosize="{ minRows: 19, maxRows: 19 }"
              v-model="scope.row.desc4"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LedgerDetails',
  data() {
    return {
      queryForm: {
        name: '关于25年度XXXXXX',
        name1: '张XX',
        data: '2025-04-30',
        olddata: '2025-12-31',
        region: 'yue'
      },
      form: {
        name: '',
        data: '',
        olddata: '',
        region: '',
        title: '',
        desc: ''
      },
      tableData: [
        {
          dept: '关于25年度XXXXXX',
          desc1:
            '2025-04-29 完成进度：20%\nXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
          Progress1: 20,
          desc2:
            '2025-04-29 完成进度：30%\nXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
          Progress2: 30,
          desc3:
            '2025-04-29 完成进度：50%\nXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
          Progress3: 50,
          desc4:
            '2025-04-29 完成进度：80%\nXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
          Progress4: 80
        }
      ]
    }
  },
  methods: {
    oldDetails() {
      console.log(this.form)
      this.$router.push('/MonthlyBreakdown/MonthlyBreakdown')
    },
    // 点击页面显示条数
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    // 点击下一页与页码
    pageChange(page) {
      console.log(page)
      this.queryForm.pagenum = page
      this.onSearch()
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.title {
  text-align: center;
}
.btn-group {
  text-align: right;
  padding-bottom: 20px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
</style>
